<template>
  <div>
    <!-- banner区域 -->
    <div class="news-banner tac">
      <h2 class="c-fff fw400">橙券新闻动态</h2>
      <p class="fz20 c-fff">
        新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！
      </p>
    </div>
    <div class="news-content bg-fc">
      <ul class="w1200 flex flex-wrap">
        <li v-for="item in randerList" :key="item._id">
          <a href="javascript:;" @click="handleJump(item)">
            <img :src="item.cover" width="386" height="219" alt="!" />
            <h4 class="news-title fz16 lh56 c-333 fw400 pl20">
              {{ item.title }}
            </h4>
            <span class="news-date fz14 lh50 c-666 pl20">{{
              item.updatedAt
            }}</span>
          </a>
        </li>
      </ul>

      <div class="page-sorter pos-rel tac">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="paginationData.total"
          :page-size.sync="paginationData.pageSize"
          :current-page="paginationData.pageNumber"
          @prev-click="handleClick"
          @next-click="handleClick"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/news.css";
import { mapActions } from "vuex";

export default {
  name: "News",
  data() {
    return {
      pageList: [], //总数据数组
      currIdx: 0,
      // randerList: [], //当前要渲染的数据数组
      paginationData: {}, //分页信息
    };
  },
  computed: {
    randerList() {
      return this.pageList[this.currIdx]?.data;
    },
  },
  mounted() {
    this.$EventBus.$emit("navActive", "news");
    this.getNewsList(1, 3);
  },

  methods: {
    ...mapActions("news", ["setTime"]),

    // 跳转详情页
    handleJump(item) {
      this.setTime(item.updatedAt);
      this.$router.push({ name: "details", params: { id: item._id } });
    },

    //请求新闻列表
    async getNewsList(pageNumber, pageSize) {
      const isCached = this.pageList.some((item, idx, arr) => {
        if (item.pageNumber === pageNumber) {
          this.currIdx = idx;
          this.paginationData.pageNumber = pageNumber;
        }
        return item.pageNumber === pageNumber;
      });
      if (isCached) return;

      const result = await this.$api.getNewsList(pageNumber, pageSize);
      // result.data 要渲染的数据数组
      // result.pagination 页码信息 pageNumber--当前页码 pageSize--单页展示数据数量 total--数据总数
      this.paginationData = result.pagination;
      this.pageList.push({
        pageNumber: result.pagination.pageNumber,
        data: result.data,
      });
      console.log("获取新闻列表", result);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>